<template>
  <el-form ref="ruleFormRef" :model="formData">
    <el-table
      :style="{
        width: '100%',
        height: height + 'px'
      }"
      :data="formData.tableData"
      :border="true"
      size="small"
    >
      <template v-for="(item, index) in getTableModel">
        <el-table-column
          v-if="item.type"
          :key="item.key || index"
          :type="item.type"
          :fixed="item.fixed"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
        </el-table-column>
        <el-table-column
          v-else
          :type="item.type"
          :key="item.key + 1000 || index + 1000"
          :fixed="item.fixed"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
          <template v-if="item.required" #header>
            <span class="star">* </span>
            <span class="starName">{{ item.label }}</span>
          </template>
          <template #default="scope">
            <template v-if="item.slot == 'text'">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
            <template v-else-if="item.slot">
              <slot
                :name="item.slot"
                :row="scope.row"
                :value="scope.row[item.prop]"
                :scope="scope"
              ></slot>
            </template>
            <template v-else>
              <el-form-item
                :prop="
                  'tableData.' +
                  scope.$index +
                  '.' +
                  item.prop
                "
                :rules="item.rules"
              >
                <Upload
                  v-if="item.upload"
                  v-model="scope.row[item.prop]"
                  :showLimit="false"
                  :small="true"
                  v-bind="item.props"
                  style="width: 100%"
                />
                <Aselect
                  v-else-if="item.select"
                  v-model="scope.row[item.prop]"
                  v-bind="item.props"
                  :options="item.options || []"
                />
                <Cascader
                  v-else-if="item.cascader"
                  v-model="scope.row[item.prop]"
                  v-bind="item.props"
                  :options="item.options || []"
                />
                <el-input
                  v-else-if="item.input"
                  v-bind="item.props"
                  v-model="scope.row[item.prop]"
                />
                <el-checkbox
                  v-else-if="item.checkbox"
                  v-model="scope.row[item.prop]"
                  v-bind="item.props"
                  style="display: block"
                  size="large"
                />
                <CitySelect
                  v-else-if="item.citySelect"
                  v-model="scope.row[item.prop]"
                  v-bind="item.props"
                />
              </el-form-item>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-form>
</template>

<script setup>
import Cascader from "@/components/Select/Cascader.vue";
import Aselect from "@/components/Select/Aselect.vue";
import Upload from "@/components/Upload/Upload.vue";
import CitySelect from "@/components/Select/CitySelect.vue";
import { ref } from "vue";

const props = defineProps({
  getTableModel: {
    default: []
  },
  formData: {
    default: {
      tableData: []
    }
  },
  height: {
    default: null
  },
  rules: {
    default: {}
  }
});

const ruleFormRef = ref(null);

// 验证表单
const checkValidate = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((bool) => {
      if (bool) {
        resolve();
      } else {
        reject();
      }
    });
  });
};

// 清空表单
const resetForm = () => {
  ruleFormRef.value.resetFields();
};

defineExpose({
  ruleFormRef,
  checkValidate,
  resetForm
});
</script>

<style lang="scss" scoped>
.star {
  color: red;
}

::v-deep {
  .el-form-item__content {
    display: block;
  }

  .el-form-item {
    margin-bottom: 0;
  }
  .el-form-item__error {
    position: relative !important;
    top: 0;
  }
}
</style>
